<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 30px;
            margin: 10px;
            font-size: large;
            outline: none;
            text-align: center;
        }

        button {
            width: 50px;
            height: 30px;
            margin-left: 70px;
        }
    </style>
    <!-- 
        在while中用break实现要求用户一直输入用户名和密码，只要不是admin、88888就一直提示
        要求重新输入,如果正确则提登录成功.
     -->
</head>

<body>
    <span> 用户名 :</span><input type="text" name="" id="username" placeholder="请输入用户名"><br>
    <span> &nbsp; 密码 : </span> <input type="password" name="" id="psd" placeholder="请输入密码"><br>
    <button type="submit" id="sub">提交</button>
</body>
<script>
    document.getElementById('sub').onclick = function () {
        let userName = document.getElementById('username').value; //获取到输入的用户名
        let passWord = document.getElementById('psd').value; //获取到输入的密码
        // console.log(userName, passWord);
        //判断
        while (userName != 'admin' && passWord != '88888') {
            alert('用户名或密码错误，请重新输入');
            console.log(userName, passWord);
            document.getElementById('username').value = '';
            document.getElementById('psd').value = '';
            break;
        }
        while (userName == 'admin' && passWord == '88888') {
            alert('登陆成功！');
            userName = '';
            passWord = '';
            break;
        }
    }
</script>

</html>